<template>
    <div style="width: 100%; display: table;">
        <table v-if="type==='attribute'" class="doc-table" style="width: 100%;  display: table;">
            <tr class="head">
                <td style="width: 15%;">参数</td>
                <td style="width: 45%;">说明</td>
                <td style="width: 10%;">类型</td>
                <td style="width: 15%;">可选值</td>
                <td style="width: 15%;">默认值</td>
            </tr>
            <tr v-for="(item,index) in data">
                <td>{{item.name}}</td>
                <td>{{item.desc}}</td>
                <td>{{item.type}}</td>
                <td>{{item.values}}</td>
                <td>{{item.defaults}}</td>
            </tr>
        </table>
        <table v-else class="doc-table" style="width: 100%;  display: table;">
            <tr class="head">
                <td style="width: 15%; ">方法名</td>
                <td style="width: 70%; ">说明</td>
                <td style="width: 15%; ">参数</td>
            </tr>
            <tr v-for="(item,index) in data">
                <td>{{item.name}}</td>
                <td>{{item.desc}}</td>
                <td>{{item.params}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import Vue from 'vue'

export default {
    name: 'ex-sort-table',

    data() {

        return {
            rows: [{
                name: '参数',
                desc: '说明',
                type: '类型',
                values: '可选值',
                defaults: '默认值'
            }, {
                name: '参数2',
                desc: '说明3',
                type: '类型2',
                values: '可选值2',
                defaults: '默认值2'
            }]
        }
    },

    props: {
        type: '',
        data: {
            type: Array,
            default: function() {
                return [];
            }
        },
    },

    created() {

    },

    destroyed() {},

    methods: {

    }
}
</script>
<style>
td {
    vertical-align: inherit;
}

.doc-table {
    font-size: 14px;
    display: table;
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
    overflow-x: auto;
}


.doc-table td {
    border-bottom: 1px solid #dfe2e5;
    border-left: 0px solid #dfe2e5;
    border-right: 0px solid #dfe2e5;
    border-top: 0px solid #dfe2e5;

    padding: 0.6em 1em;
}

.doc-table .head td {
    font-weight: bold;
    background-color: #efefef;
    border-bottom: 2px solid #dfe2e5;
}

.doc-table tr {
    width: 100%;
    border-top: 0px solid #dfe2e5;
}


.doc-table tr:nth-child(2n) {
    background-color: #fff;
}
</style>